<template>
  <section>
    <div class="body">
      <fieldset style="margin-top: 20px;border-bottom: none;border-left: none;border-right: none;border-color:#fdfdfe">
        <legend style="font-size: 20px">导入教师信息</legend>
      </fieldset>
      <el-form>
        <el-form-item label="所属系">
          <el-select placeholder="选择系" v-model="departvalue" clearable>
            <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button class="el-icon-refresh" size="small" type="success">刷新</el-button>
          <el-button class="el-icon-search" size="small" type="success">筛选</el-button>
          <el-button class="el-icon-circle-plus-outline" size="small" type="success">添加</el-button>
        </el-form-item>
        <el-form-item label="导入教师">
          <el-button class="el-icon-upload"  type="primary">上传文件</el-button>
          <!--若失败自动触发此按钮-->
          <a id="errorData" style="display: none" >查看导入错误数据</a>
          <el-button size="small" type="primary">下载导入数据模板</el-button>
        </el-form-item>
      </el-form>
      <fieldset style="margin-top: 20px;border-bottom: none;border-left: none;border-right: none;border-color:#fdfdfe">
        <legend style="font-size: 20px">教师信息</legend>
        <el-table border="true" :data="teacherInfoList" header-row-style="font-size: 20px;color:black;">
          <el-table-column label="系部"  prop="department.name"></el-table-column>
          <el-table-column label="工号" prop="user.workid"></el-table-column>
          <el-table-column label="姓名" prop="user.realname"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button  size="small" type="success">编辑</el-button>
              <el-button  size="small" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </fieldset>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="pageSizes"
                       :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
      </el-col>

    </div>
  </section>

</template>

<script>
  import API from '@/api'
    export default {
        name: "teacher",
      data(){
        return{
          userid:'',
          useidInfo:{},
          schoolid:'',
          departmentList:[],
          teacherInfoList:[],
          departvalue:'',
          // 分页数据列表--start
          total: 0,
          pageIndex: 1, //页码
          pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
          pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

          // 分页数据列表--end

          listLoading: false, //是否显示加载动画
        }
      },
      methods:{
        //分页
        handleSizeChange(val) { //改变分页大小
          this.pageSize = val;
          this.getuseidInfo();
        },
        handleCurrentChange(val) { //页码跳转
          this.pageIndex = val;
          this.getuseidInfo();
        },
          getuseidInfo(){
            this.userid = JSON.parse(localStorage.getItem("CurrentUser"));//获取userid
            console.log(this.userid);
            API.user.findOneById(this.userid).then(res=>{
              this.useidInfo=res.data.data;
              this.getdepartmentList();
              this.getteacherInfoList();
              console.log(this.useidInfo);
            }).catch(error=>{
              console.log(error);
            })
          },
          getdepartmentList(){
            API.department.findBath(this.useidInfo.schoolid).then(res=>{
              this.departmentList=res.data.data;
            }).catch(error=>{
              console.log(error);
            });
          },
          getteacherInfoList(){
            this.listLoading = true;
            let para={
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
              schoolid:this.useidInfo.schoolid,
            };
            console.log(para);
            API.teacherInfo.findDetailBatchBySchoolIdCondition(para).then(res=>{
              this.listLoading = false;
              this.total=res.data.total;
              this.teacherInfoList=res.data.data;
            }).catch(error=>{
              console.log(error);
              this.listLoading = false;
            })
          },
      },
      mounted(){
        this.getuseidInfo();
      }
    }
</script>

<style scoped>
  .body{
    text-align: left;
  }
</style>
